<script setup>
import { ref, reactive, onMounted, toRaw, watch } from 'vue'
import { ElMessage } from 'element-plus'
import {Plus, Edit, Delete, Search} from '@element-plus/icons-vue'

//引入API
// import {} from '../../api/salary.js'

function doModify() {
    if(tableSelectObj.value == null) {
        ElMessage.warning('请选择需要修改的行');
        return;
    }
    //设置数据
    const obj = toRaw(tableSelectObj.value);//取原对象
    const newValue = structuredClone(obj);//克隆
    formData.value = newValue;

    //成功后打开对话框
    dialogFlag.value = true;
}
function doRemove() {
    if(tableSelectObj.value == null) {
        ElMessage.warning('请选择需要删除的行');
        return;
    }
    //TODO: 执行数据删除

    //成功后执行以下操作
    ElMessage.success('删除成功');
    //重新加载数据
    doLoadTableDatas();
}

const tableLoading = ref(true);
// 数据
const currentPageNum = ref(1);//当前页码
const currentPageSize = ref(5);//每页显示的最大数据量
const dataArr = ref([]);//当前页数据
const total = ref(0);//总数据量
function doLoadTableDatas() {//加载表格数据
    tableLoading.value = true;//开始加载
    //TODO: 使用API根据条件加载数据
    //主要查询条件
    let params = {
        pageNum: currentPageNum.value,
        pageSize: currentPageSize.value,
        no: searchFormData.value.no,
        name: searchFormData.value.name,
        month: searchFormData.value.month,
    };
    console.log('search params:', params);

    //模拟数据加载操作
    const loadData = () => {
        return {
            total: 100,
            data: [
                {id:1,salMonth:'2024-06',no:'000001',name:'汤姆1',baseSal:6000,performance:1500,performanceDeductions:100,overtimePay:0,subsidy:300,bonus:1000,money:1000,fiveOneDeductions:1000,attendanceDeductions:0,otherDeductions:0,total:8700,remark:'无',distributionDate:'2024-07-10'},
                {id:2,salMonth:'2024-06',no:'000002',name:'汤姆2',baseSal:6000,performance:1500,performanceDeductions:100,overtimePay:0,subsidy:300,bonus:1000,money:1000,fiveOneDeductions:1000,attendanceDeductions:0,otherDeductions:0,total:8700,remark:'无',distributionDate:'2024-07-10'},
                {id:3,salMonth:'2024-06',no:'000003',name:'汤姆3',baseSal:6000,performance:1500,performanceDeductions:100,overtimePay:0,subsidy:300,bonus:1000,money:1000,fiveOneDeductions:1000,attendanceDeductions:0,otherDeductions:0,total:8700,remark:'无',distributionDate:'2024-07-10'},
                {id:4,salMonth:'2024-06',no:'000004',name:'汤姆4',baseSal:6000,performance:1500,performanceDeductions:100,overtimePay:0,subsidy:300,bonus:1000,money:1000,fiveOneDeductions:1000,attendanceDeductions:0,otherDeductions:0,total:8700,remark:'无',distributionDate:'2024-07-10'},
                {id:5,salMonth:'2024-06',no:'000005',name:'汤姆5',baseSal:6000,performance:1500,performanceDeductions:100,overtimePay:0,subsidy:300,bonus:1000,money:1000,fiveOneDeductions:1000,attendanceDeductions:0,otherDeductions:0,total:8700,remark:'无',distributionDate:'2024-07-10'},
            ]
        }
    };
    const result = loadData();

    //成功后执行以下操作
    //处理响应数据
    dataArr.value = result.data;
    total.value = result.total;
    tableLoading.value = false;//加载完成

}

onMounted(()=> {//挂载后执行
    doLoadTableDatas();//核心表格数据
    doLoadAllEmps();
});

const tableSelectObj = ref(null);//选中行对象
function doTableSelectionChange(selected) {//选中操作
    //选中变化
    console.log('doTableSelectionChange:', selected);
    tableSelectObj.value = selected;
}

//搜索
const searchFormData = ref({no:'',name:'',month:''});
let nowDay = new Date();
searchFormData.value.month = nowDay.getFullYear() + '-' + ((nowDay.getMonth()+1)+'').padStart(2,'0');
const searchFormRef = ref(null);//searchForm
function doFormSearch() {
    if(tableLoading.value) {
        ElMessage.warning('正在查询中...');
        return;
    }
    //console.log('searchFormData:', toRaw(searchFormData.value));
    let oldPageNum = currentPageNum.value;
    currentPageNum.value = 1;//从头开始查询
    if(oldPageNum == 1) {//防止重复加载
        // 根据条件加载数据
        doLoadTableDatas();
    }
}

//分页变化,加载数据
watch(currentPageNum, (nv, ov, onCleanup)=>{
    doLoadTableDatas();
});
watch(currentPageSize, (nv, ov, onCleanup)=>{
    doLoadTableDatas();
});

//修改
//对话框中表单数据
const formData = ref({id:undefined,salMonth:'',no:'',name:'',baseSal:0,performance:0,performanceDeductions:0,overtimePay:0,subsidy:0,bonus:0,money:0,fiveOneDeductions:0,attendanceDeductions:0,otherDeductions:0,total:0,remark:'',distributionDate:''});
const formRef = ref(null);
const dialogFlag = ref(false);//控制对话框
function doDialogBeforeClose(done) {
    //关闭操作
    done();
    formRef.value.clearValidate();//清除校验标记
}
function doCloseDialog(type) {
    if(type === 0) {
        //取消操作
        dialogFlag.value = false;
        formRef.value.clearValidate();//清除校验标记
        return;
    }
    if(type === 1) {
        //确定操作
        doFormSubmit();
    }
}
function doFormSubmit() {//表单校验与提交
    formRef.value.validate((valid, fields) => {
        if (valid) {
            console.log('校验通过');
            //TODO: 提交修改的数据
            let data = {
                id: formData.value.id,
                performanceDeductions: formData.value.performanceDeductions,
                overtimePay: formData.value.overtimePay,
                subsidy: formData.value.subsidy,
                bonus: formData.value.bonus,
                money: formData.value.money,
                fiveOneDeductions: formData.value.fiveOneDeductions,
                attendanceDeductions: formData.value.attendanceDeductions,
                otherDeductions: formData.value.otherDeductions,
                total: formData.value.total,
                remark: formData.value.remark,
                distributionDate: formData.value.distributionDate,
            };
            console.log('submit:', data);

            //成功后执行以下操作
            dialogFlag.value = false;//成功,关闭对话框
            ElMessage.success('修改成功');
            //重新加载数据
            doLoadTableDatas();
        } else { 
            //console.log('校验不通过:', fields);
            ElMessage.warning('信息有误，请查看对应的提示信息');
        }
    });;
}
const formRules = reactive({
    performanceDeductions:[{required:true, validator: (rule, value, callback)=>{
        if(value === '') {
            callback('请填写绩效扣款');
            return;
        }
        if(value < 0) {
            callback('绩效扣款不能小于0');
            return;
        }
        callback();
    }, trigger:'blur'}],
    overtimePay:[{required:true, validator: (rule, value, callback)=>{
        if(value === '') {
            callback('请填写加班费');
            return;
        }
        if(value < 0) {
            callback('加班费不能小于0');
            return;
        }
        callback();
    }, trigger:'blur'}],
    subsidy:[{required:true, validator: (rule, value, callback)=>{
        if(value === '') {
            callback('请填写其他补助');
            return;
        }
        if(value < 0) {
            callback('其他补助不能小于0');
            return;
        }
        callback();
    }, trigger:'blur'}],
    bonus:[{required:true, validator: (rule, value, callback)=>{
        if(value === '') {
            callback('请填写奖金');
            return;
        }
        if(value < 0) {
            callback('奖金不能小于0');
            return;
        }
        callback();
    }, trigger:'blur'}],
    money:[{required:true, validator: (rule, value, callback)=>{
        if(value === '') {
            callback('请填写奖惩金额');
            return;
        }
        callback();
    }, trigger:'blur'}],
    fiveOneDeductions:[{required:true, validator: (rule, value, callback)=>{
        if(value === '') {
            callback('请填写五险一金扣款');
            return;
        }
        if(value < 0) {
            callback('五险一金扣款不能小于0');
            return;
        }
        callback();
    }, trigger:'blur'}],
    attendanceDeductions:[{required:true, validator: (rule, value, callback)=>{
        if(value === '') {
            callback('请填写考勤扣款');
            return;
        }
        if(value < 0) {
            callback('考勤扣款不能小于0');
            return;
        }
        callback();
    }, trigger:'blur'}],
    otherDeductions:[{required:true, validator: (rule, value, callback)=>{
        if(value === '') {
            callback('请填写其他扣款');
            return;
        }
        if(value < 0) {
            callback('其他扣款不能小于0');
            return;
        }
        callback();
    }, trigger:'blur'}],
    total:[{required:true, validator: (rule, value, callback)=>{
        if(value === '') {
            callback('请填写总合计工资');
            return;
        }
        callback();
    }, trigger:'blur'}],
    remark:[{required:false, max:100, message: '备注内容长度不能大于100', trigger:'blur'}],
    distributionDate:[{required:true, validator: (rule, value, callback)=>{
        if(value === null || value === undefined || value === '') {
            callback(new Error('请填写发放日期'));
            return;
        }
        callback();
    }, trigger:'change'}],
});

function doFormDataTotalSalary() {//计算修改中的总工资
    let total = sumFormDataTotalSalary(formData.value);
    formData.value.total = total;
    formRef.value.validateField('total');
}

function sumFormDataTotalSalary(data) {//计算总工资
    let total = data.baseSal 
    + data.performance - data.performanceDeductions
    + data.overtimePay + data.subsidy + data.bonus + data.money
    - data.fiveOneDeductions - data.attendanceDeductions - data.otherDeductions;
    return total;
}

//新增
const addFormHeight = ref(0);//添加区域高度
const addFormData = ref({salMonth:'',empId:undefined,emp:undefined,baseSal:0,performance:0,performanceDeductions:0,overtimePay:0,subsidy:0,bonus:0,money:0,fiveOneDeductions:0,attendanceDeductions:0,otherDeductions:0,total:0,remark:'',distributionDate:''});
const addFormRef = ref(null);//addForm
const addFormRules = reactive({
    salMonth:[{required:true, validator: (rule, value, callback)=>{
        if(value === null || value === undefined || value === '') {
            callback(new Error('请填写工资月份'));
            return;
        }
        callback();
    }, trigger:'change'}],
    empId:[{required:true, validator: (rule, value, callback)=>{
        if(value === null || value === undefined || value === '') {
            callback(new Error('请选择员工'));
            return;
        }
        callback();
    }, trigger:'change'}],
    performanceDeductions:[{required:true, validator: (rule, value, callback)=>{
        console.log('performanceDeductions =', value);
        if(value === '') {
            callback('请填写绩效扣款');
            return;
        }
        if(value < 0) {
            callback('绩效扣款不能小于0');
            return;
        }
        callback();
    }, trigger:'blur'}],
    overtimePay:[{required:true, validator: (rule, value, callback)=>{
        if(value === '') {
            callback('请填写加班费');
            return;
        }
        if(value < 0) {
            callback('加班费不能小于0');
            return;
        }
        callback();
    }, trigger:'blur'}],
    subsidy:[{required:true, validator: (rule, value, callback)=>{
        if(value === '') {
            callback('请填写其他补助');
            return;
        }
        if(value < 0) {
            callback('其他补助不能小于0');
            return;
        }
        callback();
    }, trigger:'blur'}],
    bonus:[{required:true, validator: (rule, value, callback)=>{
        if(value === '') {
            callback('请填写奖金');
            return;
        }
        if(value < 0) {
            callback('奖金不能小于0');
            return;
        }
        callback();
    }, trigger:'blur'}],
    money:[{required:true, validator: (rule, value, callback)=>{
        if(value === '') {
            callback('请填写奖惩金额');
            return;
        }
        callback();
    }, trigger:'blur'}],
    fiveOneDeductions:[{required:true, validator: (rule, value, callback)=>{
        if(value === '') {
            callback('请填写五险一金扣款');
            return;
        }
        if(value < 0) {
            callback('五险一金扣款不能小于0');
            return;
        }
        callback();
    }, trigger:'blur'}],
    attendanceDeductions:[{required:true, validator: (rule, value, callback)=>{
        if(value === '') {
            callback('请填写考勤扣款');
            return;
        }
        if(value < 0) {
            callback('考勤扣款不能小于0');
            return;
        }
        callback();
    }, trigger:'blur'}],
    otherDeductions:[{required:true, validator: (rule, value, callback)=>{
        if(value === '') {
            callback('请填写其他扣款');
            return;
        }
        if(value < 0) {
            callback('其他扣款不能小于0');
            return;
        }
        callback();
    }, trigger:'blur'}],
    total:[{required:true, validator: (rule, value, callback)=>{
        if(value === '') {
            callback('请填写总合计工资');
            return;
        }
        callback();
    }, trigger:'blur'}],
    remark:[{required:false, max:100, message: '备注内容长度不能大于100', trigger:'blur'}],
    distributionDate:[{required:true, validator: (rule, value, callback)=>{
        if(value === null || value === undefined || value === '') {
            callback(new Error('请填写发放日期'));
            return;
        }
        callback();
    }, trigger:'change'}],
});
function doShowAdd() {
    //增加一个员工考核记录
    addFormHeight.value = addFormHeight.value == 0 ? 800:0;
}

function doAddFormSubmit() {
    addFormRef.value.validate((valid, fields) => {
        if (valid) {
            console.log('校验通过');
            //TODO: 提交添加的数据
            let params = toRaw(addFormData.value);
            console.log('addFormData:', params);

            //成功后执行以下操作
            ElMessage.success('添加成功');
            //重新加载数据
            doLoadTableDatas();
        } else { 
            //console.log('校验不通过:', fields);
            ElMessage.warning('信息有误，请查看对应的提示信息');
        }
    });;
}
function doAddFormReset() {//表单重置
    addFormRef.value.resetFields();
}
function doAddFormClose() {
    addFormHeight.value = 0;//隐藏表单
    addFormRef.value.resetFields();//重置表单
}
function doAddFormDataTotalSalary() {//计算添加中的总工资
    let total = sumFormDataTotalSalary(addFormData.value);
    addFormData.value.total = total;
    addFormRef.value.validateField('total');
}

function doChangAddFormDataEmp(val) {//选择员工
    console.log('doChangAddFormDataEmp :', val);
    addFormData.value.empId = val.id;
    addFormData.value.baseSal = val.baseSal
    addFormData.value.performance = val.performance;
}

const selectEmp = ref(null);
const empArr = ref([]);
function doLoadAllEmps() {//加载员工
    //TODO: 使用API加载数据
    //模拟数据加载
    setTimeout(()=>{
        let data = [
            {id:1,name:'汤姆1',no:'000001',baseSal:6000,performance:1500},
            {id:2,name:'汤姆2',no:'000002',baseSal:5000,performance:500},
            {id:3,name:'汤姆3',no:'000003',baseSal:5500,performance:1000},
        ];

        //成功后执行以下操作
        empArr.value = data;
    },500);
}

</script>
<template>
    <div>
        <div class="title-dl">工资发放列表</div>
        <div class="tool-btns" >
            <!-- search表单 -->
            <el-form :model="searchFormData" :inline="true" ref="searchFormRef" >
                <el-form-item label="员工工号：" prop="no">
                    <el-input v-model="searchFormData.no" autocomplete="off" placeholder="请输入员工工号" clearable style="width: 160px" />
                </el-form-item>
                <el-form-item label="姓名：" prop="name">
                    <el-input v-model="searchFormData.name" autocomplete="off" placeholder="请输入员工姓名" clearable style="width: 160px" />
                </el-form-item>
                <el-form-item label="工资月份：" prop="month">
                    <el-date-picker type="month" v-model="searchFormData.month" placeholder="选择月份" format="YYYY-MM" value-format="YYYY-MM" style="width: 160px" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :icon="Search" @click="doFormSearch">查询</el-button>
                </el-form-item>
            </el-form>

            <el-button type="success" :icon="Plus" @click="doShowAdd">新增</el-button>
            <el-button type="warning" :icon="Edit" @click="doModify">修改</el-button>
            <el-button type="danger" :icon="Delete" @click="doRemove">删除</el-button>

            <div class="add-form-dl" :style="{height: addFormHeight+'px'}" >
                <div class="title-dl">工资发放</div>
                <!-- 新增一条工资发放记录 -->
                <el-form :model="addFormData" label-width="130px" :rules="addFormRules" 
                status-icon ref="addFormRef">
                    <el-form-item label="员工：" prop="empId" >
                        <!-- 必须使用value-key指定 value绑定的对象的唯一标识 -->
                        <el-select v-model="addFormData.emp" value-key="id" placeholder="请选择员工" @change="doChangAddFormDataEmp" >
                            <el-option v-for="p in empArr" :key="p.id" :label="p.name+'('+p.no+')'" :value="p"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="工资信息：" >
                        <el-text type="primary">基本工资：{{addFormData.baseSal}}，</el-text>
                        <el-text type="primary">绩效工资：{{addFormData.performance}}</el-text>
                    </el-form-item>
                    <el-form-item label="工资月份：" prop="salMonth">
                        <el-date-picker type="month" v-model="addFormData.salMonth" placeholder="选择月份" format="YYYY-MM" value-format="YYYY-MM" />
                    </el-form-item>
                    <el-form-item label="绩效扣款：" prop="performanceDeductions">
                        <el-input type="number" v-model.number="addFormData.performanceDeductions" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="加班费：" prop="overtimePay">
                        <el-input type="number" v-model.number="addFormData.overtimePay" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="其他补助：" prop="subsidy">
                        <el-input type="number" v-model.number="addFormData.subsidy" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="奖金：" prop="bonus">
                        <el-input type="number" v-model.number="addFormData.bonus" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="奖惩金额：" prop="money">
                        <el-input type="number" v-model.number="addFormData.money" autocomplete="off" placeholder="正数奖励,负数惩罚" />
                    </el-form-item>
                    <el-form-item label="五险一金扣款：" prop="fiveOneDeductions">
                        <el-input type="number" v-model.number="addFormData.fiveOneDeductions" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="考勤扣款：" prop="attendanceDeductions">
                        <el-input type="number" v-model.number="addFormData.attendanceDeductions" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="其他扣款：" prop="otherDeductions">
                        <el-input type="number" v-model.number="addFormData.otherDeductions" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="工资合计：" prop="total">
                        <el-input type="number" v-model.number="addFormData.total" autocomplete="off" style="width:200px" />
                        <el-button type="danger" @click="doAddFormDataTotalSalary" style="margin-left:10px" >合计</el-button>
                    </el-form-item>
                    <el-form-item label="备注：" prop="remark">
                        <el-input type="textarea" v-model="addFormData.remark" autocomplete="off" autosize />
                    </el-form-item>
                    <el-form-item label="发放日期：" prop="distributionDate">
                        <el-date-picker type="date" v-model="addFormData.distributionDate" placeholder="选择日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                    </el-form-item>
                    
                    <el-form-item>
                        <el-button type="primary" @click="doAddFormSubmit">确定</el-button>
                        <el-button @click="doAddFormReset" >重置</el-button>
                        <el-button type="info" @click="doAddFormClose" >关闭</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <div class="content-dl" v-loading="tableLoading" >
            <!-- 根据情况增减列 -->
            <el-table :data="dataArr" stripe border @current-change="doTableSelectionChange" highlight-current-row>
                <el-table-column prop="salMonth" label="工资月份" width="100" show-overflow-tooltip fixed  />
                <el-table-column prop="no" label="员工工号" width="120" show-overflow-tooltip  fixed />
                <el-table-column prop="name" label="姓名" show-overflow-tooltip fixed />
                <el-table-column prop="baseSal" label="基本工资" width="100" show-overflow-tooltip />
                <el-table-column prop="performance" label="绩效工资" width="100" show-overflow-tooltip />
                <el-table-column prop="performanceDeductions" label="绩效扣款" width="100" show-overflow-tooltip >
                    <template #default="scope">
                        <span style="color: #f56c6c;" >{{ scope.row.performanceDeductions }}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="overtimePay" label="加班费" width="100" show-overflow-tooltip />
                <el-table-column prop="subsidy" label="其他补助" width="100" show-overflow-tooltip />
                <el-table-column prop="bonus" label="奖金" width="100" show-overflow-tooltip />
                <el-table-column prop="money" label="奖惩金额" width="100" show-overflow-tooltip >
                    <template #default="scope">
                        <span style="color: #409eff;" >{{ scope.row.money }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="fiveOneDeductions" label="五险一金扣款" width="120" show-overflow-tooltip >
                    <template #default="scope">
                        <span style="color: #f56c6c;" >{{ scope.row.fiveOneDeductions }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="attendanceDeductions" label="考勤扣款" width="100" show-overflow-tooltip >
                    <template #default="scope">
                        <span style="color: #f56c6c;" >{{ scope.row.attendanceDeductions }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="otherDeductions" label="其他扣款" width="100" show-overflow-tooltip >
                    <template #default="scope">
                        <span style="color: #f56c6c;" >{{ scope.row.otherDeductions }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="total" label="合计" width="120" show-overflow-tooltip >
                    <template #default="scope">
                        <span style="color: #67c23a;" >{{ scope.row.total }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" show-overflow-tooltip />
                <el-table-column prop="distributionDate" label="发放日期" width="120" show-overflow-tooltip />
            </el-table>
            <el-pagination class="page-dl" layout="total, jumper, prev, pager, next" :total="total"
            v-model:current-page="currentPageNum" v-model:page-size="currentPageSize"
            :pager-count="5" hide-on-single-page size="large" />
        </div>

        <el-dialog v-model="dialogFlag" title="工资发放编辑" width="500" 
        :before-close="doDialogBeforeClose" center align-center draggable
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        >
            <el-form :model="formData" label-width="130px" ref="formRef" :rules="formRules" status-icon >
                <el-form-item label="工资月份：">
                    <el-text type="danger">{{formData.salMonth}}</el-text>
                </el-form-item>
                <el-form-item label="员工：">
                    <el-text type="danger">{{formData.name}}({{formData.no}})</el-text>
                </el-form-item>
                <el-form-item label="绩效扣款：" prop="performanceDeductions">
                    <el-input type="number" v-model.number="formData.performanceDeductions" autocomplete="off" />
                </el-form-item>
                <el-form-item label="加班费：" prop="overtimePay">
                    <el-input type="number" v-model.number="formData.overtimePay" autocomplete="off" />
                </el-form-item>
                <el-form-item label="其他补助：" prop="subsidy">
                    <el-input type="number" v-model.number="formData.subsidy" autocomplete="off" />
                </el-form-item>
                <el-form-item label="奖金：" prop="bonus">
                    <el-input type="number" v-model.number="formData.bonus" autocomplete="off" />
                </el-form-item>
                <el-form-item label="奖惩金额：" prop="money">
                    <el-input type="number" v-model.number="formData.money" autocomplete="off" placeholder="正数奖励,负数惩罚" />
                </el-form-item>
                <el-form-item label="五险一金扣款：" prop="fiveOneDeductions">
                    <el-input type="number" v-model.number="formData.fiveOneDeductions" autocomplete="off" />
                </el-form-item>
                <el-form-item label="考勤扣款：" prop="attendanceDeductions">
                    <el-input type="number" v-model.number="formData.attendanceDeductions" autocomplete="off" />
                </el-form-item>
                <el-form-item label="其他扣款：" prop="otherDeductions">
                    <el-input type="number" v-model.number="formData.otherDeductions" autocomplete="off" />
                </el-form-item>
                <el-form-item label="工资合计：" prop="total">
                    <el-input type="number" v-model.number="formData.total" autocomplete="off" style="width:200px" />
                    <el-button type="danger" @click="doFormDataTotalSalary" style="margin-left:10px" >合计</el-button>
                </el-form-item>
                <el-form-item label="备注：" prop="remark">
                    <el-input type="textarea" v-model="formData.remark" autocomplete="off" autosize />
                </el-form-item>
                <el-form-item label="发放日期：" prop="distributionDate">
                    <el-date-picker type="date" v-model="formData.distributionDate" placeholder="选择日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div>
                    <el-button @click="doCloseDialog(0)">取消</el-button>
                    <el-button type="primary" @click="doCloseDialog(1)">确定</el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>
<style scoped>
.title-dl {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}
.tool-btns {
    margin-bottom: 10px;
}
.add-form-dl {
    margin-top: 10px;
    width: 600px;
    overflow-y: auto;
    transition: height 0.5s linear;
}
.page-dl {
    margin-top: 10px;
}
</style>